<template>
  <div>
    <!-- 消息提示 -->
    <el-alert title="注意：服务端暂不提供图片上传、商品添加、编辑的提交功能，如需测试，可在本地8888端口自启服务端，具体参考Network Request URL！" type="warning" show-icon>
    </el-alert>
    <!-- 输入添加 -->
    <el-row :gutter="20" type="flex" justify="end">
      <el-col :span="8" :pull="1">
        <div>
          <el-input placeholder="请输入内容" class="input-with-select" @clear="getGoods" clearable v-model="queryInfo.query">
            <el-button slot="append" icon="el-icon-search" @click="getGoods"></el-button>
          </el-input>
        </div>
      </el-col>
      <el-col :span="2" :pull="1">
        <router-link to="/home/goods/addgoods">
          <el-button> 添加商品</el-button>
        </router-link>
      </el-col>
    </el-row>

    <!-- 表格 -->
    <el-table :data="GoodsList" border style="width: 100%" stripe>
      <el-table-column align="center" type="index" label="序号" width="50">
      </el-table-column>
      <el-table-column prop="goods_name" show-overflow-tooltip label="商品名称" width="450">
      </el-table-column>
      <el-table-column prop="goods_price" label="商品价格"> </el-table-column>
      <el-table-column prop="goods_number" label="商品重量">
      </el-table-column>
      <el-table-column label="创建时间" width="150">
        <template slot-scope="scope">
          <span>{{scope.row.upd_time|times('hours')}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" width="160">
        <template slot-scope="scope">
          <el-button size="mini" type="primary">编辑</el-button>
          <el-button size="mini" type="danger" @click="DelGoods(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination :page-sizes="[1, 2, 5, 7]" :page-size="queryInfo.pagesize" :current-page="queryInfo.pagenum" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>

export default {
  name: 'Goods',
  data() {
    return {
      GoodsList: null,
      total: 0,
      queryInfo: {
        query: '',
        pagenum: 1, //当前页数
        pagesize: 7, //每页显示多少条数据
      },
    }
  },
  created() {
    this.getGoods()
  },
  methods: {
    getGoods() {
      this.$http.get('goods', { params: this.queryInfo }).then((res) => {
        if (res.data.meta.status !== 200) return
        this.GoodsList = res.data.data.goods
        this.total = res.data.data.total
      })
    },
    handleSizeChange(newSize) {
      //监听pagesize改变事件
      this.queryInfo.pagesize = newSize
      this.getGoods()
    },
    handleCurrentChange(newNum) {
      //监听 页码值 改变事件
      this.queryInfo.pagenum = newNum
      this.getGoods()
    },
    DelGoods(item) {  //删除商品
      this.$confirm('此操作将永久删除该账户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$http.delete(`goods/${item.goods_id}`).then(res => {
          if (res.data.meta.status !== 200) {
            return this.$mess(res.data.meta.msg, 'error')
          }
          this.$mess(res.data.meta.msg, 'success')
          this.getGoods()
        })
      }).catch(() => {
        this.$mess('已取消删除', 'info')
      })

    }
  },
}
</script>

<style>
</style>